<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary">
        <i class="el-icon-plus"></i>新建服务方案
      </el-button>
    </div>
    <div class="seachlist">
      <div class="seach_item">
        <div class="name_item">创建日期</div>
        <el-date-picker
          style="width:200px;"
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="seach_item">
        <div class="name_item">方案名称</div>
        <el-input style="width:200px;"></el-input>
      </div>
      <div class="seach_item">
        <div class="name_item">代理商</div>
        <el-input style="width:200px;"></el-input>
      </div>
      <div class="seach_item">
        <div class="name_item">合同编号</div>
        <el-input style="width:200px;"></el-input>
      </div>
      <div class="seach_item">
        <div class="name_item">广告主</div>
        <el-input style="width:200px;"></el-input>
      </div>
      <div class="seach_item">
        <div class="name_item">品牌</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="seach_item">
        <div class="name_item">行业</div>
        <el-select v-model="value" style="width:200px;" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="seach_item">
        <div class="name_item">完成进度</div>
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">未完成</el-radio>
        <el-radio v-model="radio" label="3">已完成</el-radio>
      </div>
      <div class="seach_item">
        <div class="name_item">方案状态</div>
        <el-radio v-model="radio" label="1">已挂载合同</el-radio>
        <el-radio v-model="radio" label="2">未挂载合同</el-radio>
      </div>
      <div class="seach_item">
        <div class="name_item">资源状态</div>
        <el-radio v-model="radio" label="1">未锁定</el-radio>
        <el-radio v-model="radio" label="2">锁定中</el-radio>
        <el-radio v-model="radio" label="3">已过期</el-radio>
      </div>
      <div class="seach_item">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="list_warp">
            <el-table
    :data="list"
    border
     :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="合同"
      align="center"
     >
    </el-table-column>
    <el-table-column
      prop="name"
      label="方案名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="province"
      label="周期"
      align="center"
     >
    </el-table-column>
    <el-table-column
      prop="city"
      align="center"
      label="广告主"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      align="center"
      label="广告主题"
     >
    </el-table-column>
    <el-table-column
      prop="zip"
      align="center"
      label="预算（万元）"
     >
    </el-table-column>
    <el-table-column
      prop="zip"
      align="center"
      label="备注"
     >
    </el-table-column>
    <el-table-column
      prop="zip"
      align="center"
      label="制作时间"
     >
    </el-table-column>
    <el-table-column
      prop="zip"
      align="center"
      label="销售人员"
     >
    </el-table-column>
    <el-table-column
      prop="zip"
      label="进度"
      align="center"
     >
    </el-table-column>
      <el-table-column
      prop="zip"
      label="资源锁定"
      align="center"
     >
    </el-table-column>
    <el-table-column
      label="查看/编辑"
      align="center"
      width="100">
      <template slot-scope="scope">
        <el-button @click="a(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      width="100">
      <template slot-scope="scope">
        <el-button @click="a(scope.row)" type="text" size="small">56%修改</el-button>
      </template>
    </el-table-column>
  </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      time: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "",
      radio: "1",
      page:1,
      list:[{name:'xx'}]
    };
  },
  methods: {
    handleCurrentChange(){

    },
    handleSizeChange(){

    }
  },
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.seachlist {
  width: 97%;
  // height: 100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .seach_item {
    // width: 33%;
    display: flex;
    height: 40px;
    margin-left: 30px;
    margin-bottom: 15px;
    align-items: center;
    .name_item {
      width: 100px;
      font-size: 14px;
    }
  }
}
.list_warp{
  width: 97%;
  margin: 0 auto;
}
.block{
  float: right;
  margin-top: 10px;
}
</style>